<template>
	<view>
		<view class="eval-item" v-if="eval_list.length!=0"  v-for="(item ,key) in eval_list">
			<view class="eval-img-box">
				<image :src="item.user_id.head" class="eval-img"></image>
			</view>
			<view class="eval-content-box">
				<view class="eval-user">
					<text class="eval-user-name">{{item.user_id.nick_name}}</text>
					<text class="eval-user-time">{{item.create_time}}</text>
				</view>
				<view class="eval-msg">{{item.content}}</view>
				<view class="eval-cover-box">
					<image v-for="(items,index) in item.img" :key=index :src="items" class="eval-cover" @tap="show(key ,index)" ></image>
				
				</view>
			<!-- 	<view class="show">
					<image :src="item.img" mode=""></image>
				</view> -->
			</view> 
			<!-- <view class="show" v-if="picShow">
				<image :src="pic" ></image>
				<view class="error" @tap="close">
					
				</view>
			</view> -->
			<!-- 尺码选择 -->
			<pic-dialog @close="closeDialog" v-if="dialog" :title="dialog_title" >
					<view class="">
						<img :src="pic" class="show_pic">
					</view>
			</pic-dialog>
		</view>
	<!-- 	<view class="empty-eval" v-else-if="eval_list.length=0" >
			暂无评价~
		</view> -->
	
	</view>
</template>

<script>
	import picDialog from '../../components/unit/pic-dialog'
	export default{
		components:{picDialog},
		props:{eval_list : {}},
		data() {
			return{
				dialog_title: '预览图片',
				dialog : false,
				picShow:false,
				pic:'',
			}
		},
		methods: {
			// 关闭弹框
			closeDialog() {
					this.dialog = false;
				},
			show(key ,index) {
				this.dialog = true;
				// this.picShow = true;
				this.pic = this.eval_list[key].img[index]
				// console.log(this.eval_list[key].img[index])
			},
			close() {
				this.picShow = false;
			}
		}
	}
</script>

<style lang="scss">
	.error {
		width:40upx;
		height: 40upx;
		background-color: #000000;
		position: absolute;
		z-index: 99;
		top: 0upx;
		right: -40upx;
		background: url(../../static/tabbar-img/20190917174158.png);
		background-size: 100% 100%;
	}
	.show_pic{
		display: block;
		margin: auto;
		height: 100%;
		width: 100%;
	}
	// .show_pic {
	// 	image {
	// 		width: 100%;
	// 	}
	// }
	.show {
		position: fixed;
		top: 100upx;
		left:50%;
		transform: translate(-50%);
		z-index: 20;
		width: 640upx;
		height: 470upx;
		img {
			width:500upx;
			height:500upx;
		}
	}
	.eval-item{overflow: hidden;}
	.eval-item > view {float: left;}
	.eval-img-box{width: 100upx;}
	.eval-img{width: 80upx;height: 80upx;border-radius: 50%;}
	.eval-content-box{width: calc(100% - 100upx);padding-bottom: 20upx;margin-bottom: 20upx;border-bottom: 1upx solid #e1e1e1;}
	.eval-user{width: 100%;height:50upx;}
	.eval-user-name{color:#333;font-size: 34upx;font-weight: bold;}
	.eval-user-time{color:#cfcfcf;font-size: 26upx;margin-left: 20upx;}
	.eval-msg{width: 100%;line-height: 50upx;color:#666;margin-top:20upx;}
	.eval-cover-box{margin-top:20upx;}
	.eval-cover{width: 180upx;height: 180upx;border-radius: 10upx;margin-right:20upx}
	.eval-cover-box .eval-cover:last-child{margin-right: 0;}
	.empty-eval{text-align: center;height: 200upx;line-height: 150upx;color:#999}
</style>
